<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            ajax只能下载同源的数据，跨源的数据是禁止下载的

            同源策略：
                1.同协议
                2.同域名/同IP
                3.同端扣号

            跨源方法：
                1.修改ajax同源协议(不建议，因为不安全)
                2.src这个属性可以完成跨源 必须是函数调用的形式
        */
        function download(data){
            var t1 = document.getElementById("t1");
            var arr = data.weather;
            var str = ``;
            for(var i=0;i<arr.length;i++){
                str+=
                `
                    <tr>
                        <td>${arr[i].date}</td>
                        <td>${arr[i].weather}</td>
                        <td>${arr[i].wind}</td>
                        <td>${arr[i].temp}</td>
                    </tr>
                `
            }
            t1.innerHTML = str;
        }
        window.onload = function(){
            var oBtn = document.getElementById("btn1");
            oBtn.onclick = function(){
                var oScript = document.createElement("script");
                oScript.src = 'https://query.asilu.com/weather/baidu?city=%E9%87%91%E5%8D%8E&callback=download';
                document.body.appendChild(oScript);
            }
        }
    </script>
</head>
<body>
    <button id="btn1">下载</button>
    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>天气</th>
                <th>风向</th>
                <th>气温</th>
            </tr>
        </thead>
        <tbody id = "t1"></tbody>
    </table>
</body>
</html>